import {
  Component,
  OnInit,
  Inject,
  Input,
  Output,
  EventEmitter
} from "@angular/core";
import {
  FormBuilder,
  FormControl,
  FormGroup,
  Validators
} from "@angular/forms";
import * as _ from "lodash";
@Component({
  selector: "app-select-area",
  templateUrl: "./select-area.component.html",
  styleUrls: ["./select-area.component.scss"]
})
export class SelectAreaComponent implements OnInit {
  constructor(
    private fb: FormBuilder,
    @Inject("StoreService") private storeService,
    @Inject("NzMessageService") private nzMessageService,
    @Inject("FileService") private fileService
  ) {}
  onContry: any;

  @Input()
  type = "area"; // province | city | area

  @Output()
  onChange: EventEmitter<any> = new EventEmitter();

  @Input()
  onArea: any = null;

  options = [];

  contry: any[] = [
    {
      value: "china",
      label: "china",
      children: []
    }
  ];

  hash = {};

  china: any[] = [];

  get province() {
    const ret = this.eachTree(this.china, item => {
      const r = {
        label: item.name,
        value: {
          value: item.code,
          label: item.name
        },
        isLeaf: true
      };
      // if (item.children && item.children.length) {
      //   r['children'] = item.children;
      // }
      return r;
    });
    return ret;
  }

  get city() {
    const ret = this.eachTree(this.china, item => {
      const r = {
        label: item.name,
        value: {
          value: item.code,
          label: item.name
        }
      };
      if (this.isCity(item.code)) {
        item.children = null;
        r["isLeaf"] = true;
      }
      if (item.children && item.children.length) {
        r["children"] = item.children;
      }

      return r;
    });
    return ret;
  }

  get area() {
    const ret = this.eachTree(this.china, item => {
      const r = {
        label: item.name,
        value: {
          value: item.code,
          label: item.name
        }
      };
      if (this.isCity(item.code)) {
        if (!item.children || !item.children.length) {
          r["isLeaf"] = true;
        }
      }
      if (this.isArea(item.code)) {
        item.children = null;
        r["isLeaf"] = true;
      }
      if (item.children && item.children.length) {
        r["children"] = item.children;
      }

      return r;
    });
    return ret;
  }

  ngOnInit() {
    this.addListen();
  }

  addListen() {
    this.storeService.subscribe(state => {
      const { user, common } = state;
      if (common.config.china) {
        this.china = this.initData(this.storeService.state.common.config.china);
        this.initSelect();
      }
    });
  }

  initData(data) {
    return this.eachTree(data, item => {
      const r = {
        ...item
      };
      if (!r.children || !r.children.length) {
        delete r.children;
      }
      return r;
    });
  }

  initSelect() {
    this.options = this[this.type];
  }

  eachTree(arr: any, fn: Function) {
    return arr.reduce((arr, item, i) => {
      arr[i] = fn(item);

      if (arr[i].children && arr[i].children.length) {
        arr[i].children = this.eachTree(arr[i].children, fn);
      }

      return arr;
    }, []);
  }

  onChangeArea(e) {
    this.onChange.emit(e);
  }

  isArea(code: string) {
    return code && code.length == 6;
  }
  isCity(code: string) {
    return code && code.length == 4;
  }
  isProvince(code: string) {
    return code && code.length == 2;
  }
}
